<template>
    <!-- Echarts 的容器 -->
    <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    // 绘制图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart);

      // 指定图表配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["Profit", "Expenses", "Income"],
            textStyle: {
                 color: "white", // 设置图例文本颜色为白色
                },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
         xAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },
            },
            axisTick: {
              show: false, // 刻度线不显示
            },
            axisLabel: {
              color: "white", // 设置轴标签颜色为白色
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },
            },
            axisTick: {
              show: false, // 刻度线不显示
            },
            axisLabel: {
              color: "white", // 设置轴标签颜色为白色
            },
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        series: [
          {
            name: "Profit",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            emphasis: {
              focus: "series",
            },
            data: [200, 170, 240, 244, 200, 220, 210],
          },
          {
            name: "Income",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 341, 374, 390, 450, 420],
          },
          {
            name: "Expenses",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "left",
            },
            emphasis: {
              focus: "series",
            },
            data: [-120, -132, -101, -134, -190, -230, -210],
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
